import React, {Component} from 'react';
import {Button, Row, Col, Input, Form, Table, Modal, Select} from 'antd';
import MapComponent from '../components/MapComponent';
import app from '../AppMethod';
import {setting} from "../value";
import {Consumer} from "../store";

const Option = Select.Option;
const FormItem = Form.Item;

class Setting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            optionValue: [],
            editVisible: false,
            addConfirmLoading: false,
            locationData: {
                address: '广东省佛山市三水区xxxxxx',
                latitude: '23.3333334',//纬度
                longitude: '150.333335'//经度
            },
            locationData1: {
                address: '广东省佛山市三水区xxxxxx',
                latitude: '23.3333334',//纬度
                longitude: '150.333335'//经度
            },
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12},
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <div>
                    <Row>
                        <Col span={6} offset={18}>
                            <Button type='primary' onClick={() => this.handleSave()}>保存</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col offset={7} span={8}>
                            <Form className="login-form">
                                <FormItem label="账套" {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('setting_databases', {
                                            rules: [{
                                                required: true,
                                                message: '请选择账套',
                                            }],
                                        })(
                                            <Select placeholder="请选择">
                                                {
                                                    this.state.optionValue.map((item, index) => {
                                                        return (
                                                            <Option value={item.setting_databases}
                                                                    key={index}>{item.setting_databases}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>

                                <FormItem label="接单超时时间(时)" {...this.formItemLayout} style={{marginTop: '60px'}}>
                                    {
                                        getFieldDecorator('setting_take', {
                                            rules: [{
                                                required: true,
                                                message: '请输入接单超时时间',
                                            }, {
                                                pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                                                message: '请输入正数',
                                            }],
                                        })(
                                            <Input placeholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                                <FormItem label="待配货超时时间(时)" {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('setting_pick_wait', {
                                            rules: [{
                                                required: true,
                                                message: '请输入待配货超时时间',
                                            }, {
                                                pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                                                message: '请输入正数',
                                            }],
                                        })(
                                            <Input placeholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                                <FormItem label="配货超时时间(时)" {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('setting_pick', {
                                            rules: [{
                                                required: true,
                                                message: '请输入配货超时时间',
                                            }, {
                                                pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                                                message: '请输入正数',
                                            }],
                                        })(
                                            <Input placeholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                                <FormItem label="对货超时时间(时)" {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('setting_match', {
                                            rules: [{
                                                required: true,
                                                message: '请输入对货超时时间',
                                            }, {
                                                pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                                                message: '请输入正数',
                                            }
                                            ],
                                        })(
                                            <Input placeholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                                <FormItem label="待改单超时时间(时)" {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('setting_change', {
                                            rules: [{
                                                required: true,
                                                message: '请输入待改单超时时间',
                                            }, {
                                                pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                                                message: '请输入正数',
                                            }],
                                        })(
                                            <Input placeholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                            </Form>
                        </Col>
                    </Row>
                    <Row>
                        <Col offset={7} span={8}>
                            <Col span={8} style={{textAlign: 'right', color: 'rgba(0, 0, 0, 0.85)'}}><label>地址：</label></Col>
                            <Col span={12}>{this.state.locationData1.address}</Col>
                        </Col>
                    </Row>
                    <Row style={{marginTop: '30px'}}>
                        <Col offset={7} span={8}>
                            <Col span={8} style={{textAlign: 'right', color: 'rgba(0, 0, 0, 0.85)'}}><label>经纬度：</label></Col>
                            <Col span={12}>{this.state.locationData1.longitude}
                                , {this.state.locationData1.latitude}</Col>
                        </Col>
                    </Row>
                    <Row style={{marginTop: '10px'}}>
                        <Col offset={7} span={8} style={{textAlign: 'center', color: '#40a9ff'}}>
                            <label onClick={() => this.setModalVisible(true)} style={{cursor: 'pointer'}}>修改地址</label>
                        </Col>
                    </Row>
                </div>
                <div>
                    <Modal
                        maskClosable={true}
                        confirmLoading={this.state.editConfirmLoading}
                        title={'请输入'}
                        wrapClassName="vertical-center-modal"
                        width={'1000px'}
                        visible={this.state.editVisible}
                        onCancel={() => this.setModalVisible(false)}
                        footer={[
                            <Button key="back" type="default" onClick={() => this.setModalVisible(false)}>取消</Button>,
                            <Button key="submit" type='primary' onClick={() => this.handleSubmit()}>确定</Button>
                        ]}
                    >
                        <Row>
                            <Col offset={1} span={22}>
                                <Row>
                                    <MapComponent getPoint={(values) => this.getPoint(values)}
                                                  locationData={this.state.locationData}/>
                                </Row>
                                <Row style={{marginTop: '20px'}}>
                                    <Col span={24}>地址：{this.state.locationData.address}</Col>
                                </Row>
                                <Row style={{marginTop: '15px'}}>
                                    <Col span={7}>经度：{this.state.locationData.longitude}</Col>
                                    <Col span={7}>纬度：{this.state.locationData.latitude}</Col>
                                </Row>
                            </Col>
                        </Row>
                    </Modal>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "系统设置"});
        this.handleGetSetting();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 修改地址弹框的显示与隐藏
     * @param visible
     */
    setModalVisible(visible) {
        this.setState({
            editVisible: visible
        })
    };

    /**
     * 获取经纬度和地址
     * @param values
     */
    getPoint(values) {
        this.setState({
            locationData: values
        })
    };

    /**
     * 提交选取的地址和经纬度
     */
    handleSubmit() {
        let locationData = this.state.locationData;
        this.setState({locationData1: locationData});
        this.setModalVisible(false);
    };

    /**
     * 获取数据库里保存的设置
     */
    handleGetSetting() {
        app.post(setting.SEARCH_DATABASE, {}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                this.setState({optionValue: data});
            } else {
                app.alert(result.msg, 'error', 3);
            }
        });
        app.post(setting.SEARCH_SETTING, {}).then((result) => {
            if (result.code === 1) {
                let data = result.data;
                let formData = {
                    setting_databases: data.setting_databases,
                    setting_take: data.setting_take,
                    setting_pick_wait: data.setting_pick_wait,
                    setting_pick: data.setting_pick,
                    setting_match: data.setting_match,
                    setting_change: data.setting_change
                };
                this.props.form.setFieldsValue(formData);
                let location = {
                    address: data.setting_address,
                    latitude: data.setting_y,//纬度
                    longitude: data.setting_x//经度
                };
                this.setState({locationData: location, locationData1: location});
            } else {
                app.alert(result.msg, 'error', 3);
            }
        })
    };

    /**
     * 保存修改后的设置
     */
    handleSave() {
        this.props.form.validateFields((error, values) => {
            if (!error) {
                let location = this.state.locationData1;
                if (location.address == undefined || location.address.length <= 0) {
                    app.alert("请选择地址", 'error', 3);
                    return;
                }
                values.setting_address = location.address;
                values.setting_x = location.longitude;
                values.setting_y = location.latitude;
                app.post(setting.UPDATE_SETTING, values).then((result) => {
                    if (result.code === 1) {
                        app.alert(result.msg, 'success', 3);
                    } else {
                        app.alert(result.msg, 'error', 3);
                    }
                })
            }
        })
    }
};
const Settings = Form.create()(Setting);
export default prop => (
    <Consumer>
        {
            props => (
                <Settings {...prop} {...props}/>
            )
        }
    </Consumer>
);